<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <script src="https://cdn.jsdelivr.net/npm/zrender@4.3.0/dist/zrender.js"></script>
  <!-- <script src="./js/zrender.js"></script> -->
  <!-- <script src="./../"></script> -->

  <title></title>
</head>

<body>
  <div id="container" style="height: 600px;width: 1000px; "></div>
  <script>
    var zr = zrender.init(document.getElementById('container'));
    // var rect = new zrender.Rect({
    //   shape: {
    //     x: 100,
    //     y: 100,
    //     width: 200,
    //     height: 100,
    //     r: [30],
    //   },
    //   style: {
    //     fill: 'red',
    //     stroke: 'none',//描边颜色
    //   },
    //   z: 1,

    // });

    // // rect.animate('shape', true)
    // //   .when(1000, { x: 100 })
    // //   .when(2000, { x: 0 })
    // //   .when(3000, { y: 100 })
    // //   .when(4000, { y: 0 })
    // //   .start();

    // rect.on('click', function (e) {
    //   // console.log('被点击')
    //   window.open('http://yishao.top')
    // });




    // var circle = new zrender.Circle({
    //   shape: {
    //     cx: 150,
    //     cy: 100,
    //     width: 200,
    //     height: 100,
    //     r: 30,
    //   },
    //   style: {
    //     fill: 'yellow',
    //     stroke: 'none',//描边颜色
    //   },
    //   // position: [400,400]
    // });

    // rect.setCliPath(circle);
    var w = zr.getWidth();
    var h = zr.getHeight();

 



    var r1 = new zrender.Rect({
      shape: {
        width: w,
        height: h / 2,
      },
      style: {
        fill: new zrender.RadialGradient(0.5, -0.1, 1,
          [
            {
              offset: 0,
              color: '#ff8040',
            },
            {
              offset: 0.3,
              color: '#ffa040',
            },
            {
              offset: 1,
              color: '#0080ff',
            },
          ])

      },
      position: [0, h / 2],
      z:10,
    });

    var sky = new zrender.Rect({
        shape: {
            cx: 0,
            cy: 0,
            width: w,
            height: h
        },
        style: {
            fill: '#D7F9FF'
        },
        // zlevel: -1
    });
    zr.add(sky);

    var sun = new zrender.Circle({
        shape: {
            cx: 0,
            cy: 0,
            r: 50
        },
        style: {
            fill: '#FF904F'
        },
        position: [w / 2, h / 2],
        z:5,
    });
    zr.add(sun);




    // var circle = new zrender.Circle({
    //   shape: {
    //     cx: w / 2,
    //     cy: h / 2,
    //     r: 50
    //   },
    //   style: {
    //     fill: '#FF6EBE'
    //   },
    //   // draggable: true
    // });

    // var heart = new zrender.Heart({
    //   shape: {
    //     cx: w / 2 + 20,
    //     cy: h / 2 - 40,
    //     width: 60,
    //     height: 80
    //   },
    //   // draggable: true
    // });

    // circle.setClipPath(heart);

    // heart.setClipPath(circle);


    // var circle1 = new zrender.Circle({
    //   shape: {
    //     cx: w / 2,
    //     cy: h / 2,
    //     r: 50
    //   },
    //   style: {
    //     fill: 'transparent',
    //     stroke: '#5ACFFF'
    //     // fill: '#FF6EBE'
    //   },
    //   // draggable: true
    // });

    // var heart1 = new zrender.Heart({
    //   shape: {
    //     cx: w / 2 + 20,
    //     cy: h / 2 - 40,
    //     width: 60,
    //     height: 80
    //   },
    //   style: {
    //     fill: 'transparent',
    //     stroke: '#5ACFFF'

    //   }
    //   // draggable: true
    // });

    // zr.add(circle);
    // zr.add(circle1);
    // zr.add(heart1);
    zr.add(r1);


    // zr.add(heart);

    // zr.add(circle);
  </script>
</body>

</html>
